<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.shopName"
          placeholder="门店名称"
        />
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="formData.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-select
          clearable
          v-model="formData.status"
          placeholder="请选择店铺状态"
        >
          <el-option
            v-for="item in shopStatusList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button class="create" type="primary" @click="create">创建</el-button>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <!-- <el-table-column prop="opBizCode" label="opBizCode" width="260"> -->
      <!-- </el-table-column> -->
      <!-- <el-table-column prop="developerId" label="开发者ID" width="260"> -->
      <!-- </el-table-column> -->
      <el-table-column prop="shopName" label="店铺名称" width="160">
      </el-table-column>
      <el-table-column prop="phone" label="店铺电话"> </el-table-column>

      <el-table-column label="店铺地址" width="160">
        <template slot-scope="scope">
          <span
            >{{ codeToText[scope.row.provinces]
            }}{{ codeToText[scope.row.country] }}{{ codeToText[scope.row.city]
            }}{{ scope.row.address }}</span
          >
        </template>
      </el-table-column>



      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">上架</el-tag>
          <el-tag v-if="scope.row.status == 2" type="danger">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="authExpireDate" label="授权过期时间" width="180">
      </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="updateBy" label="操作人"> </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row.id)"
            >编辑</el-button
          >

          <el-popconfirm
            v-if="scope.row.status == 2"
            style="margin-left: 10px"
            title="您确定要上架当前店铺吗？"
            @confirm="updateStatus(scope.row, '1')"
          >
            <el-button type="text" size="small" slot="reference"
              >上架</el-button
            ></el-popconfirm
          >

          <el-popconfirm
            style="margin-left: 10px"
            title="您确定要下架当前店铺吗？"
            v-if="scope.row.status == 1"
            @confirm="updateStatus(scope.row, '2')"
          >
            <el-button type="text" size="small" slot="reference"
              >下架</el-button
            ></el-popconfirm
          >

          <el-button
            style="margin-left: 10px"
            type="text"
            size="small"
            @click="management(scope.row)"
            >员工管理</el-button
          >

<!--          <el-button-->
<!--            style="margin-left: 10px"-->
<!--            type="text"-->
<!--            size="small"-->
<!--            @click="manageRack(scope.row)"-->
<!--            >关联鞋架</el-button-->
<!--          >-->

          <!-- <el-popconfirm
            style="margin-left: 10px"
            title="您确定要删除当前店铺吗？"
            @confirm="deleteItem(scope.row.id)"
          >
            <el-button type="text" size="small" slot="reference"
              >删除</el-button
            >
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getListData"
    />

    <el-dialog
      :title="`${currentStore ? currentStore.shopName : ''}员工管理`"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div style="display: flex; margin-bottom: 30px">
        <el-select
          v-model="selectedStaff"
          filterable
          placeholder="请选择员工"
          style="margin-right: 30px; width: 300px"
        >
          <el-option
            v-for="item in idleStaffList"
            :key="item.userId"
            :label="`${item.userName}(${item.nickName})`"
            :value="item.userId"
          >
          </el-option>
        </el-select>

        <el-button
          style="margin-right: 30px"
          type="primary"
          :loading="bindLoading"
          @click="bindStaff"
          >绑定</el-button
        >

        <el-input
          style="width: 200px; margin-right: 30px"
          v-model="userName"
          placeholder="请输入名称"
        ></el-input>

        <el-button type="primary" @click="searyStallByUserName">查询</el-button>
      </div>

      <el-table :data="staffList" style="width: 100%">
        <el-table-column prop="deptId" label="用户编号"> </el-table-column>
        <el-table-column prop="userName" label="用户名称"> </el-table-column>
        <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
        <el-table-column prop="phonenumber" label="手机号码"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-popconfirm
              style="margin-left: 10px"
              title="您确定要删除当前员工吗？"
              @confirm="deleteShopStaff(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="shopStaffQueryParams.total > 0"
        :total="shopStaffQueryParams.total"
        :page.sync="shopStaffQueryParams.page"
        :limit.sync="shopStaffQueryParams.limit"
        @pagination="getShopStaffList"
      />
    </el-dialog>

    <!-- 店铺管理鞋架 -->
    <el-dialog
      :title="`${currentStore ? currentStore.shopName : ''}关联的鞋架`"
      :visible.sync="shoeRackVisible"
      :before-close="handleShowRackClose"
    >
      <div style="display: flex; margin-bottom: 30px">
        <el-select
          v-model="selectShoeRack"
          filterable
          placeholder="请选择鞋架"
          style="margin-right: 30px; width: 300px"
        >
          <el-option
            v-for="item in idleShoeRackList"
            :key="item.id"
            :label="`${item.rackCode}（${item.rowNum}-${item.colNum}）`"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-button
          style="margin-right: 30px"
          type="primary"
          :loading="bingRackLoading"
          @click="bindShoeRack"
          >绑定</el-button
        >
      </div>

      <el-table :data="shoeRackList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="rackCode" label="鞋架编码"> </el-table-column>
        <el-table-column label="鞋架行列">
          <template slot-scope="scope">
            <span>{{ scope.row.rowNum }} - {{ scope.row.colNum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="useNum" label="使用数量"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">上架</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-popconfirm
              style="margin-left: 10px"
              title="您确定要删除当前鞋架吗？"
              @confirm="deleteShopRack(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="shoeRackQueryParams.total > 0"
        :total="shoeRackQueryParams.total"
        :page.sync="shoeRackQueryParams.pageNo"
        :limit.sync="shoeRackQueryParams.pageSize"
        @pagination="getShopStaffList"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getShopList,
  addOrEditShop,
  deleteShop,
  getSysUserList,
  getNoShopSysUserList,
  bindShopUser,
  unbindShopUser,
  getShelfList,
  getNoShopShelfList,
  bindShopShelf,
  unbindShopShelf,
} from "@/api/shop/index";
import { shopStatusMap, shopStatusList } from "@/config/index";
import { codeToText } from "element-china-area-data";
import { setStartOfDay, setEndOfDay } from "@/utils/tool";
export default {
  name: "Index",
  data() {
    return {
      shopStatusMap,
      shopStatusList,
      formData: {
        shopName: "",
        dateRange: "",
        status: "",
      },
      queryParams: {
        page: 0,
        pageSize: 10,
        total: 0,
        channel:'DY',
      },
      list: [],
      dialogVisible: false,
      codeToText,

      userName: "",
      selectedStaff: "",
      idleStaffList: [],
      staffList: [],
      currentStore: null,
      bindLoading: false,
      shopStaffQueryParams: {
        page: 1,
        limit: 10,
        total: 0,
        userName: "",
      },

      shoeRackVisible: false,
      idleShoeRackList: [],
      shoeRackList: [],
      bingRackLoading: false,
      selectShoeRack: "",
      shoeRackQueryParams: {
        page: 1,
        limit: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getListData({
      page: 1,
      limit: 10,
    });
  },
  methods: {
    getListData({ page, limit }) {
      getShopList(
        {
          shopName: this.formData.shopName,
          status: this.formData.status,
          startTime: this.queryParams.dateRange
            ? setStartOfDay(this.queryParams.dateRange[0])
            : "",
          endTime: this.queryParams.dateRange
            ? setEndOfDay(this.queryParams.dateRange[1])
            : "",
           channel:'DY'
        },
        page || this.queryParams.page + 1,
        limit
      ).then(({ data }) => {
        this.list = data.records;
        this.queryParams.total = data.total;
        this.queryParams.page = data.current;
        this.queryParams.limit = data.size;
      });
    },

    onSearch() {
      this.queryParams = {
        ...this.queryParams,
        ...this.formData,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },

    reset() {
      this.formData = {
        shopName: "",
        dateRange: "",
        status: "",
      };
      this.queryParams = {
        page: 0,
        pageSize: 10,
        total: 0,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },

    updateStatus(item, status) {
      addOrEditShop({
        ...item,
        status,
      }).then((res) => {
        this.loading = false;
        this.$message.success("操作成功");
        this.getListData(this.queryParams);
      });
    },
    deleteItem(id) {
      deleteShop(id).then((res) => {
        this.$message.success("删除成功");
        if (this.$store.state.user.currentShop.id === id) {
          window.location.reload();
        } else {
          this.getListData(this.queryParams);
        }
      });
    },
    create() {
      this.$router.push({ path: "/shop/edit",query:{shopType:"DY"} });
    },
    edit(id) {
      this.$router.push({ path: `/shop/edit`,query:{id,shopType:"DY"} });
    },
    handleClose() {
      this.idleStaffList = [];
      this.staffList = [];
      this.selectedStaff = "";
      this.currentStore = null;
      this.dialogVisible = false;
    },
    management(item) {
      this.currentStore = item;
      Promise.all([
        getNoShopSysUserList({}, 1, 9999),
        getSysUserList({
          shopId: item.id,
          ...this.shopStaffQueryParams,
        }),
      ]).then(([res1, res2]) => {
        this.idleStaffList = res1.data.records;
        this.staffList = res2.data.records;
        this.shopStaffQueryParams.shopId = item.id;
        this.shopStaffQueryParams.total = res2.data.total;
        this.shopStaffQueryParams.page = res2.data.current;
        this.shopStaffQueryParams.limit = res2.data.size;
      });
      this.dialogVisible = true;
    },

    searyStallByUserName() {
      this.shopStaffQueryParams = {
        ...this.shopStaffQueryParams,
        userName: this.userName,
      };
      this.getShopStaffList({
        page: 1,
        limit: 10,
      });
    },

    getShopStaffList({ page, limit }) {
      getSysUserList(
        this.shopStaffQueryParams,
        page || this.queryParams.page + 1,
        limit
      ).then(({ data }) => {
        this.staffList = data.records;
        this.shopStaffQueryParams.total = data.total;
        this.shopStaffQueryParams.page = data.current;
        this.shopStaffQueryParams.limit = data.size;
      });
    },

    bindStaff() {
      if (this.selectedStaff === "") {
        this.$message.error("请选择员工");
        return;
      }
      this.bindLoading = true;
      bindShopUser({
        shopId: this.currentStore.id,
        userId: this.selectedStaff,
      })
        .then((res) => {
          this.bindLoading = false;
          this.selectedStaff = "";
          this.$message.success("绑定成功");
          this.management(this.currentStore);
        })
        .catch(() => {
          this.bindLoading = false;
        });
    },
    deleteShopStaff(item) {
      unbindShopUser({
        shopId: this.currentStore.id,
        userId: item.userId,
      }).then((res) => {
        this.$message.success("删除成功");
        this.management(this.currentStore);
      });
    },
    // 关联鞋架
    handleShowRackClose() {
      this.idleShoeRackList = [];
      this.shoeRackList = [];
      this.selectShoeRack = "";
      this.currentStore = null;
      this.shoeRackVisible = false;
    },
    manageRack(item) {
      this.currentStore = item;
      Promise.all([
        getNoShopShelfList({
          pageNo: 1,
          shopId: item.id,
          pageSize: 9999,
        }),
        getShelfList({
          shopId: item.id,
          pageNo: 1,
          pageSize: 10,
        }),
      ]).then(([res1, res2]) => {
        this.idleShoeRackList = res1.data.records;
        this.shoeRackList = res2.data.records;
        this.shoeRackQueryParams.shopId = item.id;
        this.shoeRackQueryParams.total = res2.data.total;
        this.shoeRackQueryParams.pageNo = res2.data.current;
        this.shoeRackQueryParams.pageSize = res2.data.size;
      });
      this.shoeRackVisible = true;
    },

    getShopStaffList({ page, limit }) {
      getShelfList(
        this.shoeRackQueryParams,
        page || this.shoeRackQueryParams.page + 1,
        limit
      ).then(({ data }) => {
        this.shoeRackList = data.records;
        this.shoeRackQueryParams.total = data.total;
        this.shoeRackQueryParams.pageNo = data.current;
        this.shoeRackQueryParams.pageSize = data.size;
      });
    },

    bindShoeRack() {
      if (this.selectShoeRack === "") {
        this.$message.error("请选择鞋架");
        return;
      }
      this.bingRackLoading = true;
      bindShopShelf({
        shopId: this.currentStore.id,
        rackId: this.selectShoeRack,
      })
        .then((res) => {
          this.bingRackLoading = false;
          this.selectShoeRack = "";
          this.$message.success("绑定成功");
          this.manageRack(this.currentStore);
        })
        .catch(() => {
          this.bingRackLoading = false;
        });
    },
    deleteShopRack(item) {
      unbindShopShelf({
        shopId: this.currentStore.id,
        rackId: item.id,
      }).then((res) => {
        this.$message.success("删除成功");
        this.manageRack(this.currentStore);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  margin-bottom: 20px;
}
</style>
